/* 公共样式 */

/* 全局配置  消除元素默认的内外边框线*/
* {
    /* 水平居中 */
    margin: 0 auto;
    padding: 0;
}

/* 导航栏左边框设置 */
.fl {
    float: left;
}

/* 导航栏右边框设置 */
.fr {
    float: right;
}

/* 给 shortcut中a标签去除下划线 */
.shortcut a {
    text-decoration: none;
}

/* 给ul无序列表去除点 */
li {
    list-style: none;
}

/* 全局红色字体样式设置 */
.style-red {
    color: #c81623;
}

.style-gray {
    color: #ccc;
}

/* 全局黑色字体样式设置 */
.style-black {
    color: black;
}

/* 导航栏右标题竖线 */
.spacer {
    width: 1px;
    height: 12px;
    background-color: #666;
    /* margin控制左右间隔分别是上，右，下，左 */
    margin: 9px 12px 0;
}

/* 我的桃跑购“下拉箭头” */
@font-face {
    /* 1.这个字体名称要注意  icomoon */
    font-family: 'icomoon';
    /* 2.一定要注意路径的问题  icomooon文件要和fonts文件放在一起*/
    /* 由于是在CSS文件里需要更改路径地址 */
    scr: url('../fonts/icomoon.eot?7kkyc2');
    src: url('../fonts/icomoon,eot?7kkyc2#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
        url('../fonts/icomoon.woff?7kkyc2') format('woff'),
        url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 设置我的桃跑购“下拉箭头” 样式 */
.fr .icomoon {
    font-family: 'icomoon';
    font-size: 16px;
    /* 因为i标签作为行元素，无法调试margin则设置为行高调试i标签高度 */
    line-height: 26px;
}

/* 导航栏右“请登录”增加间隔 */
.spacer1 {
    width: 7px;
    height: 12px;
}

/* 导航栏右“免费注册”增加间隔 */
.spacer2 {
    width: 13px;
    height: 12px;
}

/* 版心 导航栏大框架设置样式*/
.w {
    width: 1200px;
    margin: 0 auto;
    /* 两个div水平对齐 */
    vertical-align: top;
    /* display: inline; */
}

/* 给导航栏里面文字设置样式 */
.shortcut {
    height: 31px;
    background-color: #f1f1f1;
    /* 行高 */
    line-height: 31px;
    margin: 0 auto;
}

/* 设置.shortcut .w .fl li中li导航栏左文字的左右和样式 */
.shortcut .w .fl li {
    float: left;
    /* 电脑配置不一，字体不建议更改 */
    /* font-size: 2px; */
}

/* 设置.shortcut .w .fr li中li导航栏右文字的左右和样式 */
.shortcut .w .fr li {
    float: left;
    /* 电脑配置不一，字体不建议更改 */
    /* font-size: 2px; */
}

/* header框架处理  */
/* header区域 */
.header {
    /* 相对定位 */
    position: relative;
    height: 105px;
    width: 1200px;
    margin: auto;
    /* background-color: pink; */
}

/* bug已解决 */
/* !!!!有bug div标签无法包裹h1.用另外一种做法设h1为div用class建立事件
并用margin控制距离 */
/* 将class：logo进行float进行浮动使其移动到header最右 */
/* .logo {
    float: right;
    margin: 50px;
} */

/* 将logo设置为div，控制margin移动间隔 */
/* .logo1 {
    float: right;
    margin: -48px 225px;
} */

/* logo样式设置 */
.logo {
    /* 绝对定位 根据父系header相对定位，进行绝对定位*/
    position: absolute;
    /* 需注意这里有问题，这里设置的是会随着页面的该变而发生位置的变化 */
    top: 30px;
    left: 25px;
    /* width: 175px; */
    height: 0px;
    background-color: purple;
}

/* logo标签a标签样式设置 */
.logo a {
    position: absolute;
    /* 定义成行内块元素 */
    display: block;
    width: 175px;
    height: 56px;
    background-color: purple;
    /* 插入图片img语法  no-repeat使其背景图片不会被重复*/
    background: url(../img/图标4.png) no-repeat;
    /* 隐藏超出的字体  第一种方法*/
    /* overflow: hidden; */
    /* 使其字体超出a标签block快元素 */
    /* text-indent: -999px; */
    /* 另外一种隐藏字体方法  使其字体大小为0*/
    font-size: 0;
}

/* 搜索框样式设计 */
.search {
    position: absolute;
    top: 27px;
    left: 350px;
}

/* 搜索框样式设计 */
.text {
    width: 450px;
    height: 32px;
    border: solid 2px #c81623;
    /* 使其搜素框文字向里移动 */
    padding-left: 10px;
    /* 使其搜素框文字颜色改变 */
    /* color: #ccc; */
    /* 使其文本框与搜索二字在同一个浮动选项 */
    float: left;
}

/* 提示文本创建伪类子标签 */
.search .placeholder {
    color: #dfdfdf;
}

/* 搜素框搜素二字样式设置 */
.btu {
    float: left;
    width: 82px;
    height: 36px;
    border: 0;
    font-size: 16px;
    background-color: #c81623;
    color: #f1f1f1;
    /* 使其文本框与搜索二字在同一个浮动选项 */
    float: left;
}

/* 热词样式设置 */
.hotword {
    position: absolute;
    left: 335px;
    top: 70px;
}

/* 热词a标签间隔设置 */
.hotword a {
    margin: 0 16px;
    /* color: black; */
}

/* 购物车样式设置 */
.shopcar {
    position: absolute;
    right: 10px;
    top: 27px;
    height: 34px;
    width: 138px;
    background-color: #f7f7f7;
    border: 1px solid #dfdfdf;
    /* 行高 */
    line-height: 34px;
    text-align: center;
}

/* 购物车图标样式 */
.car {
    font-family: 'icomoon';
    color: #da5555;
    margin-right: 9px;
}

/* 右三角样式 */
.arrow {
    font-family: 'icomoon';
    /* 左间隔 */
    margin-left: 3px;
}

/* 购物车数量样式 */
.count {
    position: absolute;
    background-color: #e60012;
    top: -5px;
    /* 用左定位，将位置定死，使其数量改变文字向右 */
    left: 106px;
    height: 14px;
    /* 由于相对定位，count变成行内元素用padding进行背景色面板控制 */
    padding: 0 3px;
    /* 由于已经是行内元素，继承了shopcar行高，需要line-height进调整 */
    line-height: 14px;
    color: #fff;
    /* 数量图标模样设置 */
    /* border-radius: 左上角  右上角 右下角 左下角; */
    border-radius: 7px 7px 7px 0;
}


/* nav start */
.nav {
    height: 45px;
    /* 底部边框设置 */
    border-bottom: 2px solid #b1191a;
}


.dropdown {
    width: 209px;
    height: 45px;
}

/* 全部分类样式 */
.dropdown .dt {
    height: 100%;
    font-size: 16px;
    color: #fff;
    background-color: #b1191a;
    text-align: center;
    line-height: 45px;
}

/* 全部分类下来菜单样式 */
.dropdown .dd {
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
}

/* 分类样式 */
.menu-item {
    height: 31px;
    line-height: 31px;
    margin-left: 1px;
    /* 没有给宽度width,padding不会使盒子撑大 */
    padding: 0 10px;
}

/* 选中下拉菜单变白 鼠标经过li的盒子*/
.menu-item:hover {
    background-color: #fff;
}

/* 鼠标经过li里里面的a变颜色 */
.menu-item:hover a {
    color: #c81623;
}

/* 下拉菜单栏里面的a标签文字 */
.menu-item a {
    font-size: 14px;
    color: #fff;
}

/* 下拉菜单栏里面的i标签 文字图标小三角 */
.menu-item i {
    font-family: 'icomoon';
    font-size: 18px;
    color: #fff;
    float: right;
}

/* 右侧搜索词样式 */
.navitems {
    margin-left: 10px;
}

/* 右侧搜索词样式 li标签样式*/
.navitems li {
    float: left;
}
.navitems li a:hover {
    color:red;
}

/* 右侧搜索词样式 a标签文字样式 */
.navitems li a {
    /* a标签设计成块元素 使其鼠标经过文字范围变大*/
    display: block;
    height: 45px;
    padding: 0 30px;
    line-height: 45px;
    font-size: 16px;
    color: #000;
}

/* footer部分 */
.footer {
    height: 386px;
    background-color: #f5f5f5;
    padding-top: 30px;
}

/* 底部第一部分样式 */
.mod-sevice {
    height: 79px;
    /* background-color: pink; */
    border-bottom: 1px solid whitesmoke;
    border-bottom: 1px solid #ccc;
}

/* 底部第一部分li样式 */
.mod-sevice li {
    float: left;
    width: 240px;
    height: 79px;
}

/* 图标公共样式 */
.mod-sevice-icon {
    /* 浮动的盒子 可以直接给大小 不需要转换 */
    float: left;
    width: 50px;
    height: 50px;
    background: url(../img/icons.png) no-repeat;
    margin-left: 35px;
}

/* 正字title样式 */
.mod-sevice-title {
    margin-left: 7px;
    float: left;
}

.mod-sevice-title h5 {
    margin: 5px px;
}

/* 正图标样式 */
.mod-sevice-zheng {
    /* 图片相对定位 */
    background-position: -185px -5px;
}

/* 快图标样式 */
.mod-sevice-kuai {
    /* 图片相对定位 */
    background-position: -188px -65px;
}

/* 快图标样式 */
.mod-sevice-bao {
    /* 图片相对定位 */
    background-position: -190px -125px;
}

/* 快图标样式 */
.mod-sevice-sevice {
    /* 图片相对定位 */
    background-position: -190px -182px;
}

/* 快图标样式 */
.mod-sevice-help {
    /* 图片相对定位 */
    background-position: -189.5px -243px;
}

/* 底部样式 */
.mod-help {
    height: 187px;
    border-bottom: 1px solid #ccc;
}

/* 底部文字总样式 */
.mod-help-items {
    float: left;
    width: 150px;
    padding: 20px 0 0 50px;
}

/* 底部文字总样式  大标题*/
.mod-help-items dt {
    font-size: 16px;
    height: 25px;
}

/* 底部文字总样式  文字*/
.mod-help-items dd {
    height: 22px;
}

/* 帮助中心文字样式 */
.mod-help-app dt,
.mod-help-app p {
    padding-left: 6px;
}

/* 二维码图片样式 */
.mod-help-app img {
    margin: 9px;
}

/* 底部第三部分样式 */
.mod-copyright {
    text-align: center;
}

/* 底部第三部分样式 第一行文字 */
.mod-copyright-links {
    margin: 20px 0 15px;
}

/* 底部第三部分样式 第二行文字 */
.mod-copyright-info {
    line-height: 15px;
}

.qi {
    width: 222px;
    /* height: 330px; */
    position: fixed;
    margin-left: 1310px;
    top: 30px;
    background-color: #fff;
} 
.qi p{
    /* margin-top: 330px; */
    color: #000;
    text-align: center;

}